/*************文章列表组件*****************/

/*预览区*/
.page-diy-pc-section .preview-target,.page-list-pc-section .preview-target {
	
	.articles-list {
		max-width: 1200px;
        margin: 0 auto;
		.articles-list-preview {

			>.title {
				padding: 5px 0;
                margin-bottom: 10px;
                line-height: 26px;
				h2,h3 {
					float:left;
                    font-size: 24px;
                    font-weight: 500;
					margin: 0 20px 0 0;
				}
                .sub-title {
					font-size: 14px;
					color: #999;
				}
				.more{
					float:right;
					color:#999;
				}
			}

			.list{
				display:box;
				padding: 0;
				margin-left: -10px;
				margin-right: -10px;
				//样式一
				.item-style0 {
					background-color: #fff;
					float:left;
					box-sizing: border-box;
					padding:0 10px 10px 10px;
					margin-bottom: 10px;
					width:25%;
					.image {
						position: relative;
						
						img {
							width:100%;
							border-radius:5px;
						}
					}
					.content {
						padding:0;
						min-height: 60px!important;

						.title {
							font-weight: 550;
							font-size:16px;
							padding:20px 0 3px 0;
							color: #000;
							margin-bottom: 0;
						}

						.info {
							display: block;

							.type {
								float: left;
								width: 60%;
								min-width: 60px;
								text-align: left;
								color:#999;
								font-size: 12px;
								overflow: hidden;

								div {
								  display: inline-block;
								  margin-right:5px;
								}
							}
						}
					}
				}
				//样式二
				.item-style1 {
					background-color: #fff;
					float:left;
					box-sizing: border-box;
					padding:0 10px 10px 10px;
					margin-bottom: 10px;
					width:50%;
					
					.content {
						position: relative;
						background-color: #f2f2f2;
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
						padding: 180px 0 10px 0;
						margin-bottom: 0;
						border-radius: 5px;
						overflow: hidden;
						z-index: 1;
						.bg {
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
							background: rgba(0,0,0,.4);
							z-index: 3;
						}
						.title {
							position: relative;
							color: #fff;
							padding: 10px;
							margin-bottom: 0;
							font-size: 22px;
							height: 86px;
							z-index: 5;
							overflow: hidden;
						}
						.description {
							color: #fff;
							padding: 10px;
						}
						.info {
							position: absolute;
							top: 10px;
							left: 10px;
							color: #fff;
							z-index: 5;
							.a-category {

							}
						}
					}
				}
				//样式三
				.item-style2 {
					background-color: #fff;
					float:left;
					box-sizing: border-box;
					padding:0 10px;
					margin-bottom: 10px;
					width:50%;
					.title {
						float: left;
						font-weight: 500;
						font-size:18px;
						padding:0;
						color: #333;
						margin: 0;
						width: 80%;
					}
					.create-time {
						float: right;
						width: 20%;
						line-height: 28px;
						color: #999;
						display: block;
					}
				}
			}	
		}
    }

}


